<template>
  <div class="play_list_detail">
    <!-- 歌单描述 -->
    <div class="play_list_detail_header">
      <div class="poster">
        <ltAvatar :src="playListDetail.coverImgUrl" size="200"></ltAvatar>
        <div class="play_count">
          <span class="iconfont icon-kaishi1"></span>
          <span class="count">{{ numberFormat(playListDetail.playCount || 0) }}</span>
        </div>
      </div>

      <div class="right_info">
        <h3 class="name">{{ playListDetail.name }}</h3>
        <p class="desc">{{ playListDetail.description }}</p>
        <div class="auth_info">
          <ltAvatar :src="userinfo.avatarUrl" shape="circle" size="50"></ltAvatar>
          <span class="nickname">{{ userinfo.nickname }}</span>
          <div class="tag">
            <span>标签:</span>
            <span v-for="item in playListDetail.tags" :key="item" class="tag_item">{{ item }}</span>
          </div>
        </div>
        <div class="btn">
          <ltButton class="play_all_btn" type="danger">
            <span class="iconfont icon-kaishi1"></span>
            <span>播放全部</span>
          </ltButton>
        </div>
      </div>
    </div>

    <!-- 歌单歌曲列表 -->
    <div class="play_song_list">
      <div class="play_song_list_header">
        <span class="index">序号</span>
        <span class="title">标题</span>
        <span class="singer_name">专辑</span>
        <span class="singer">歌手</span>
        <span class="options">操作</span>
      </div>
      <div v-if="playSongList.length > 0" class="play_song_list_body">
        <div
          v-for="(item, index) in playSongList"
          :key="item.id"
          class="play_song_list_item"
          @click="playSongHandler(item)"
        >
          <span class="index">{{ padZero(index + 1, 2) }}</span>
          <div class="title">
            <ltAvatar :src="item.al.picUrl" size="50"></ltAvatar>
            <div class="song_info">
              <span>{{ item.name }}</span>
            </div>
          </div>
          <span class="singer_name">{{ item.al.name }}</span>
          <span class="singer">{{ item.ar[0].name }}</span>

          <span class="options">
            <span class="iconfont icon-kaishi1"></span>
            <span class="iconfont icon-aixin"></span>
          </span>
        </div>
      </div>
      <div v-else class="none">
        <ltNone></ltNone>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'

import ltAvatar from '@renderer/base-ui/lt-avatar/index.vue'
import ltButton from '@renderer/base-ui/lt-button/index.vue'
import ltNone from '@renderer/base-ui/lt-none/index.vue'

import { getPlaylistDetailApi } from '@renderer/api'
import { numberFormat, padZero } from '@renderer/utils/format'

import { useRoute } from 'vue-router'
import usePlay from '@renderer/pinia/modules/play'

const route = useRoute()
const playStore = usePlay()
const id = route.query.id as any as number // 歌单id

const playListDetail = ref<any>({}) // 歌单描述信息
const playSongList = ref<any>([]) // 歌单歌曲列表
const userinfo = ref<any>({}) // 歌单创建者信息

// 获得歌单详情
const getPlayListDetail = async (id: number) => {
  getPlaylistDetailApi(id).then((res: any) => {
    playListDetail.value = res.playlist
    playSongList.value = res.playlist.tracks.filter((f) => f.fee !== 1)
    userinfo.value = res.playlist.subscribers[0]
  })
}

onMounted(() => {
  getPlayListDetail(id)
})

// 点击播放音乐
const playSongHandler = (item: any) => {
  console.log(item)
  playStore.setCurrentAudio2(item)
  playStore.setPlayList2(item)
}
</script>

<style scoped lang="scss">
.play_list_detail {
  padding: 20px;
  overflow-y: auto;

  .play_list_detail_header {
    display: flex;
    .poster {
      width: 200px;
      height: 200px;
      position: relative;
      margin-right: 15px;
      img {
        width: 100%;
        height: 100%;
        border-radius: 10px;
      }
      .play_count {
        display: flex;
        align-items: center;
        position: absolute;
        top: 15px;
        right: 15px;
        .count {
          font-weight: 700;
          margin-left: 5px;
        }
      }
    }

    .right_info {
      flex: 1;

      .name {
        font-weight: 700;
      }
      .desc {
        color: #f6f6f6;
        padding: 5px 10px;
        border-radius: 5px;
        cursor: pointer;

        &:hover {
          background-color: var(--ev-main-bgc);
        }
      }

      .auth_info {
        display: flex;
        align-items: center;
        margin-top: 10px;
        .nickname {
          margin: 0px 10px;
        }
        .tag {
          display: flex;
          span {
            margin: 0 5px;
          }
          .tag_item {
            color: #15d46b;
          }
        }
      }

      .btn {
        margin-top: 10px;
        .play_all_btn {
          display: flex;
          .iconfont {
            margin-right: 5px;
          }
        }
      }
    }
  }

  .play_song_list {
    margin-top: 20px;
    .play_song_list_header {
      display: flex;
      .index {
        flex: 0.6;
      }
      .title {
        flex: 3;
      }
      .singer_name {
        flex: 2;
      }
      .singer {
        flex: 1;
      }
      .options {
        flex: 1;
      }
    }

    .play_song_list_body {
      .play_song_list_item {
        display: flex;
        align-items: center;
        margin-bottom: 5px;
        cursor: pointer;
        .index {
          flex: 0.6;
        }
        .title {
          flex: 3;
          display: flex;
          align-items: center;
          .song_info {
            display: flex;
            span {
              margin-left: 10px;
            }
          }
        }
        .singer_name {
          flex: 2;
        }
        .singer {
          flex: 1;
        }
        .options {
          flex: 1;
          display: flex;
          span {
            margin-right: 8px;
          }
        }
        &:hover {
          background-color: var(--ev-main-bgc);
        }
      }
    }
  }
}
</style>
